<template>
  <div class="component">
    <div class="container-center">
      <div class="over-hidden">
        <router-link
          class="btn btn-default pull-right icon icon-arrowsleftline mt-lg"
          :to="getMicroRoute('/tools')"
        >
          返回列表</router-link>
        <h2 class="text-left">色值转换</h2>
      </div>
      <div class="form-group">
        <label class="form-label">RGB红绿蓝：<span class="text-lightgray text-xs">支持输入如：rgb(255, 255, 255)、rgba(255, 255, 255, .6)</span></label>
        <div class="form-wall rgb-inputs">
          <input class="form-input" type="text" v-model="r" @blur="handleBlur" />
          <input class="form-input" type="text" v-model="g" @blur="handleBlur" />
          <input class="form-input" type="text" v-model="b" @blur="handleBlur" />
        </div>
      </div>
      <div class="form-group">
        <label class="form-label">HEX十六位颜色代码：</label>
        <div class="form-wall">
          <input class="form-input" type="text" v-model="hex" />
        </div>
      </div>
      <div class="clear pt-sm mb-sm">
        <a class="btn btn-theme mr-md" @click="toHex">RGB转HEX</a>
        <a class="btn btn-primary" @click="toRGB">HEX转RGB</a>
      </div>
      <h3>颜色板</h3>
      <div class="rbg-board" :style="'background:#' + String(hex||'').replace(/#/g, '')"></div>
    </div>
  </div>
</template>

<script>
/* 色值转换 */
export default {
  data () {
    return {
      r: 255,
      g: 255,
      b: 255,
      hex: 'ffffff'
    }
  },

  methods: {
    /**
     * @function RGB转HEX
    */
    toHex () {
      let result = this.rgbToHex(
        'rgba(' + this.r + ',' + this.g + ',' + this.b + ')'
      )
      this.hex = result.hex.slice(1)
    },

    /**
     * @function HEX转RGB
    */
    toRGB () {
      let result = this.hexToRgba(
        this.hex
      )
      this.r = result.r
      this.g = result.g
      this.b = result.b
    },

    handleBlur () {
      let reg = /\s*rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(,\s*\d?\.\d+)?\s*\)\s*/i
      let values = reg.exec(this.r)
        ? reg.exec(this.r) : reg.exec(this.g)
        ? reg.exec(this.g) : reg.exec(this.b)
        ? reg.exec(this.b) : null
      if (values) {
        this.r = values[1]
        this.g = values[2]
        this.b = values[3]
      }
    },

    /**
     * @function rgb(a)颜色值转成十六进制颜色(hex)
    */
    rgbToHex (rgb) {
      var rRgba = /rgba?\((\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})(\s*,\s*([.\d]+))?\)/
      var r, g, b, a
      var rsa = rgb.replace(/\s+/g, '').match(rRgba)
      if (rsa) {
        r = (+rsa[1]).toString(16)
        r = r.length === 1 ? '0' + r : r
        g = (+rsa[2]).toString(16)
        g = g.length === 1 ? '0' + g : g
        b = (+rsa[3]).toString(16)
        b = b.length === 1 ? '0' + b : b
        a = (+(rsa[5] ? rsa[5] : 1)) * 100
        return {
          hex: '#' + r + g + b,
          alpha: Math.ceil(a)
        }
      } else {
        return {
          hex: rgb,
          alpha: 100
        }
      }
    },

    /**
     * @function 十六进制颜色(hex)转成rgba格式
    */
    hexToRgba (hex, al) {
      var hexColor = /^#/.test(hex) ? hex.slice(1) : hex
      var alp = hex === 'transparent' ? 0 : Math.ceil(al)
      var r, g, b
      hexColor = /^[0-9a-f]{3}|[0-9a-f]{6}$/i.test(hexColor) ? hexColor : 'fffff'
      if (hexColor.length === 3) {
        hexColor = hexColor.replace(/(\w)(\w)(\w)/gi, '$1$1$2$2$3$3')
      }
      r = hexColor.slice(0, 2)
      g = hexColor.slice(2, 4)
      b = hexColor.slice(4, 6)
      r = parseInt(r, 16)
      g = parseInt(g, 16)
      b = parseInt(b, 16)
      return {
        hex: '#' + hexColor,
        alpha: alp,
        rgba: 'rgba(' + r + ', ' + g + ', ' + b + ', ' + (alp / 100).toFixed(2) + ')',
        r: r,
        g: g,
        b: b
      }
    }
  }
}
</script>

<style lang="less">
.rgb-inputs{
  display: flex;
  justify-content: space-between;
  .form-input {
    width: 30%;
  }
}
.rbg-board{
  height: 60px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.text-xs {
  font-size: 12px;
}
</style>
